<template>
  <div class="test">
    <SimpleFlowChart :links="links" :nodes="nodes" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import SimpleFlowChart  from '@/components/SimpleFlowChart/index.vue';

const nodes = ref([
{
    id: 1,
    name: 'reference in function (main), address (0010122c).',
    color: '#0a8d7b'
  },
  {
    id: 2,
    name: 'para:(Varl) addr:(00101218) from:if(param 1 == 2) {iVarl = atoi((char *)param_2[11))',
    color: '#1c9de3'
  },
  {
    id: 3,
    name: 'malloc Call:_ptr= (uint *)malloc((long)iVar1 << 2)',
    color: '#c7b740'
  },
  {
    id: 4,
    name: 'para:(Varl) addr:(00101218) from:if (param 1 == 2) {iVarl= atoi((char *)param 2[11))',
    color: '#c33527'
  },
  {
    id: 5,
    name: 'input para:(param 2) inputtundefined8 main(int param_1,undefined8 *param 2)',
    color: '#0a8d7b'
  },
  {
    id: 6,
    name: 'reference in function (main), address (0010122c).',
    color: '#1c9de3'
  },
  {
    id: 7,
    name: 'para:(Varl) addr:(00101218) from:if (param 1 == 2) {iVarl= atoi((char *)param 2[11))',
    color: '#c7b740'
  },
])

const links = ref([
  {
    source: 1,
    target: 2
  },
  {
    source: 2,
    target: 3
  },
  {
    source: 3,
    target: 4
  },
  {
    source: 4,
    target: 5
  },
  {
    source: 5,
    target: 6
  },
  {
    source: 6,
    target: 7
  }
])
</script>

<style scoped lang="scss">
.test {
  width: 100%;
  position: relative;
  height: 100%;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  background-color: #2c2d2d;
}
</style>